<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="icon" href="./favicon.ico">
    <title>TZF&CFH</title>
    <meta name="description" content="记录TZF&CFH">
    <meta name="keywords" content="记录TZF&CFH">
    <link rel="stylesheet" type="text/css" href="./css/lovexhj.css">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" type="text/css" href="./css/FiraCode.css">
    <!-- 背景音乐 -->
    <!-- <audio src="http://music.163.com/song/media/outer/url?id=186453.mp3" autoplay="autoplay"></audio> -->
</head>

<body>
    <!-- 标题板块 -->
    <div class="title">
        <img src="./images/bg1.gif" alt="bgGif">
        <p id="tqyxhj"></p>
    </div>

    <!-- 分页1 - 骚话 -->
    <div class="page page1">
        <div class="swiper-container swiper-container-lovexhj1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
                        <img src="http://q.qlogo.cn/headimg_dl?dst_uin=2372475752&spec=640&img_type=jpg" alt="xhj">
                        <img src="./images/xa.png" alt="cat">
                        <img src="http://q.qlogo.cn/headimg_dl?dst_uin=3582583631&spec=640&img_type=jpg" alt="tqy">
                        <p id="lovetime"></p>
                        <p>点点滴滴下的我们....</p>
                        <p>一起看看吧~</p>
                        <span class="right">往右划动 →</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
                        <img class="cat" src="./images/xs.png" alt="cat2">
                        <p class="catText">相识</p>
                        <p>相识于十二兽酒吧 H12台</p>
                        <p>十二兽改布局之后，这个台也不存在了...</p>
                        <p>不过并不能影响什么</p>
                        <span class="right">再划一下 →</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
                        <img class="cat" src="./images/xz.png" alt="cat3">
                        <p class="catText">相知 </p>
                        <p>有了联系方式之后经常聊天到深夜...</p>
                        <p>也相互渐渐的有了对对方的基本了解</p>
                        <span class="right">再划一次吧 →</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page1-lovexhj1">
                        <img class="cat" src="./images/xa.png" alt="cat4">
                        <p class="catText">相爱</p>
                        <p>2022年7月20日</p>
                        <p>通过一段时间的接触</p>
						<p>我们逐渐更深入的了解了对方</p>
                        <b>我们也开始了恋爱关系...</b>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-lovexhj1"></div>
        </div>
    </div>

    <!-- 分页2 - 时间轴 -->
    <div class="page page2">
        <div class="swiper-container swiper-container-lovexhj2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-1.jpg" alt="page2-1">
                        <p><b>故事的开始</b></p>
                        <p>2022-07-20</p>
                        <p>我们的故事，从此开始</p>
						<p>童心未泯的傻子</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-3.jpg" alt="page2-2">
                        <p><b>一起做手工</b></p>
                        <p>你说你生日想让我送一件有意义的</p>
						<p>于是我就提出一起做手工戒指</p>
						<p>你还傻乎乎的以为是你看着老板做</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-8.jpg" alt="page2-3">
                        <p><b>情侣对戒</b></p>
                        <p>本来10点打烊的店</p>
                        <p>被我们俩卡点过去硬生生的给老板加了个班</p>
                    </div>
                </div>
				<div class="swiper-slide">
				    <div class="page2-box">
				        <img src="./images/2.jpeg" alt="page2-9">
				        <p><b>很多值得记录的日常我都没有拍照</b></p>
				        <p>那就放一下我们为数不多的合照吧</p>
				    </div>
				</div>
				<div class="swiper-slide">
				    <div class="page2-box">
				        <img src="./images/1.jpeg" alt="page2-9">
				        <p><b>干发帽的耳朵真适合你</b></p>
				        <p></p>
				    </div>
				</div>
				<div class="swiper-slide">
				    <div class="page2-box">
				        <img src="./images/3.jpg" alt="page2-9">
				        <p><b>踮脚拍照</b></p>
				        <p></p>
				    </div>
				</div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-4.jpg" alt="page2-4">
                        <p><b></b></p>
                        <p></p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-5.jpg" alt="page2-5">
                        <p><b></b></p>
                        <p></p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-6.jpg" alt="page2-6">
                        <p><b>认真给我挤痘痘</b></p>
                        <p></p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-7.jpg" alt="page2-7">
                        <p><b></b></p>
                        <p></p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-4.jpg" alt="page2-8">
                        <p><b></b></p>
                        <p></p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-9.jpg" alt="page2-9">
                        <p><b>这个表情看一次笑一次</b></p>
                        <p></p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2-box">
                        <img src="./images/page-2-10.jpg" alt="page2-10">
                        <p><b>未来更新...</b></p>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-lovexhj2"></div>
        </div>
    </div>

    <!-- 分页3 - 一段话 
    <div class="page page3">
        <div id="talkToXHJ">
            <b>回顾上一个520</b>
            <br />
            当时你从外面特地跑过来找我，我知道你超级超级害怕晕车，但是还是为了当天见到我，坐车回来了，当我听见你要回来的时候我还以为你在骗我哈哈，结果晚上真的见到你了，你一下车就冲过来抱住了我，这个画面回想起来仿佛就发生在昨天一样清晰...
            <br />
            <br />
            <b>这是我们的第二个520</b>
            <br />
            比较直男的我，还是用属于我的方式来送你一个小小的虚拟礼物（上次那个太不用心了哈哈）
            <br />
            这段时间经常告诉你我在写代码不能陪你玩，其实我都在花心思做这个呢，我想把它做到很好很好，让你感受一下“代码”带来了趣味性
            <br />
            用心才能做得更好，陪你也是这样，每天的事情大同小异，除去日常琐事剩下的就是陪你，日复一日但是每天都会是不同的感觉，带来不同的乐趣
            <br />
            陪你玩游戏，陪你聊天，一起互怼一起疯，看似再平常不过的事情在我们这里都充满了开心
            <br />
            <br />
            <b>我想</b>
            <br />
            我们还会有好多好多的520，不过每一次我都要尝试用新鲜的思路去给你带来一些值得回忆的瞬间还是很有挑战性的，对我来说给你准备惊喜的过程总是充满了动力
            <br />
            用文字来对你说一些话感觉好像情书一样尴尬哈哈，那就不说了我
            <br />
            节日快乐猪
            <br />
            ## 爱你的仔仔 (๑′ᴗ‵๑)~ ❤
        </div>
    </div>
-->
    <!-- 分页4 - 结尾 -->
    <div class="page page4">
        <div class="page4-box">
            <div class="page4-img">
                <div class="swiper-container swiper-container-lovexhj3">
                    <div class="swiper-wrapper">
						<div class="swiper-slide">
						    <img src="./images/1.jpeg">
						</div>
						<div class="swiper-slide">
						    <img src="./images/2.jpeg">
						</div>
						<div class="swiper-slide">
						    <img src="./images/3.jpg">
						</div>
                        <div class="swiper-slide">
                            <img src="./images/page-2-8.jpg">
                        </div>
						<div class="swiper-slide">
						    <img src="./images/11.jpg" alt="page-4-10">
						</div>
						<div class="swiper-slide">
						    <img src="./images/12.jpg" alt="page-4-10">
						</div>
                        <div class="swiper-slide">
                            <img src="./images/page-2-3.jpg" alt="page-4-2">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/page-2-2.jpg" alt="page-4-3">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/page-2-4.jpg" alt="page-4-4">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/page-2-5.jpg" alt="page-4-5">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/page-2-6.jpg" alt="page-4-6">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/page-2-7.jpg" alt="page-4-7">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/page-2-1.jpg" alt="page-4-8">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/page-2-9.jpg" alt="page-4-9">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/page-2-10.jpg" alt="page-4-10">
                        </div>
                    </div>
                    <div class="swiper-button-prev swiper-button-prev-lovexhj3"></div>
                    <div class="swiper-button-next swiper-button-next-lovexhj3"></div>
                </div>
            </div>
            <div class="page4-text">
                <h1>Send To Future</h1>
                <p>以后的每一天我们一起更新...</p>
            </div>
        </div>

        <div class="footer">

        </div>
    </div>

    <!-- 两只XHJ一样的猪 -->
    <div class="xhjIsPig">
        <img src="./images/pig1.gif" alt="pig1" class="pig1">
        <img src="./images/pig2.gif" alt="pig2" class="pig2">
    </div>

    <!-- js加载 -->
    <script src="https://cdn.bootcss.com/wow/1.1.2/wow.js"></script>
    <script src="./js/typeit.min.js"></script>
    <script src="./js/swiper-3.4.2.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>

    <script src="./js/lovetime.js"></script>
    <script src="./js/talk.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/su.js"></script>
    <script>
        (function () {
            new WOW().init()
        })()
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('body').wpSuperSnow({
                flakes: ['./images/004.png', './images/003.png', './images/002.png',
                    './images/001.png'
                ],
                totalFlakes: '100',
                zIndex: '999999',
                maxSize: '30',
                maxDuration: '20',
                useFlakeTrans: false
            });
        });
    </script>
</body>

</html>